<template>
  <div class="ipt">
    <input type="text" id="user" required autocomplete="flase"/>
    <label for="user" class="label">用户名</label>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.ipt {
  width: 200px;
  height: 50px;
  position: relative;
  margin: 100px auto;
}
.ipt input {
  border: none;
  border-bottom: 2px solid blueviolet;
  height: 20px;
  outline: none;
  transition: all 0.5s;
  position: absolute;
  bottom: 0;
}
.ipt label {
  position: absolute;
  color: blueviolet;
  font-size: 14px;
  bottom: 2px;
  z-index: 9;
  cursor: text;
  transition: all 0.5s;
  background-color: transparent;
}
input:focus + label,
input:valid + label {
  transform: translateY(-20px);
  background-color: #fff;
}
</style>
